
<template>
  <div class="Popular" ref="homePage">

    <div class="bj">
       <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="美食排行榜" left-text=""left-arrow>
         <!-- <div slot="right" class="searcha"> -->
       </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div v-show="datalist.length == 0"  class="wudingdan" >
        <van-icon name="description"/>
        <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="datalist.length != 0" class="list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦" @load="ShopList">
        <div class="commodity" @click="commodity(itme.shpSN)" v-for="(itme,index) in datalist" :key='index'>
          <div class="commodity-img">
            <img :src="itme.Cover">
          </div>
          <div class="commodity-details">
            <div class="details-teile">
              <span>{{itme.Name}}</span>&#8194;
              <span style="color: #46d0ca;">11分</span>
            </div>
            <div style="display: flex;">
              <div style="">
                <van-tag v-for="(data,index) in itme.Tags" :key='index' size="20px" plain color="#46d0ca" style="margin-right: 5px;">{{data}}</van-tag>
              </div>
            </div>
            <div class="deleted-content">
              <p>{{itme.Info}}</p>
            </div>
            <div class="deleted-km">
              <p>距您**KM</p>
              <div style="width: 40%;text-align: center;">
                <span style="font-size: 20px; color: #46d0ca;">￥{{itme.PerCost}}</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>

      </van-list>

    </div>
    <!-- <v-min></v-min> -->
  </div>
</template>

<script>
  // import city from '@/assets/js/city.js'
  // import AMap from "AMap"
  // import min from '@/views/Min.vue'
  // import data from '@/assets/js/data.js'
  import {
    ShopList,
    publicad
  } from '@/api/home.js'
  export default {
    components: {
      // "v-min": min,
    },
    // watch: {
    //   ass: function(val) {
    //     console.log(val)
    //   }
    // },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        //头部
        // datalist:data,
        datalist: [],
        jinweilng: localStorage.getItem('Jingweilng'), //取经纬度
        jinweilat: localStorage.getItem('Jingweilat'), //取经纬度
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        totalPage: 0,
        pageNumber: 0, //自定义一个页数变量
      }
    },
    methods: {
      ShopList() {
        let data = {
          "PageNo": this.pageNumber+1, //页码
          "Lng": this.jinweilng, //经纬度
          "Lat": this.jinweilat,
          "Type":2,
          "SortType":1,
          // "Tags":2,
        }
        ShopList(data).then(res => {//请求美食列表

          this.totalPage = res.PageCount
          if (res.List.length > 0) {
            this.datalist = this.datalist.concat(res.List);
          } else {
            this.datalist = res.List
          }
          console.log(res)
          // console.log(this.datalist)
          this.loading = false;
          this.pageNumber++;
          if (this.pageNumber >= this.totalPage) {
            this.finished = true;
          }
        })
      },
      //点击跳转
      clickleft(){
        this.$router.go(-1);
      },
      commodity(shpSN){
        this.$router.push({
          path: "/Food/foodDetails",
          query:{
            shpSN:shpSN,

          }
        })
      },

    },
    mounted() {
      this.ShopList()
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      //console.log(this.partInfo);
    },

  }
</script>
<style lang="scss">
  .Popular {
    background: white;
    .bj{
      .van-icon {
        color: white !important;

      }
    }
    .search {
      width: 80%;
      margin: 0 auto;
      display: flex;
      background: white;
      height: 40px;
      border: 1px solid #00CBA6;

      .search_cs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
      }

      .search_in {
        display: flex;
        align-items: center;
        width: 60%;

        input {
          border: none;
          border-left: 1px solid #999999;
          border-radius: 0 !important;
        }
      }

    }

    .current {
      display: flex;
      padding: 0.625rem 1rem;
      line-height: 2rem;
      font-size: 14px;
      background: #FFFFFF;
      justify-content: space-between;
      color: #999999;

      .current_box {
        width: 50%;
        display: flex;
        justify-content: space-around;

      }
    }

    .popular {
      .popular_p {
        padding: 10px 16px;
        background: #f5f5f5;
        font-size: 14px;
      }

      .popular_cs {
        width: 80px;
        height: 30px;
        margin: 0.625rem 0.625rem;
        border-radius: 1.875rem;
        border: 1px solid #e4e4e4;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
      }
    }

    .van-index-bar {
      color: #999999 !important;

      .van-index-anchor {
        background: #f5f5f5;
        color: #999999 !important;
        font-weight: 600;
      }

      .van-cell {
        color: #999999 !important;
      }
    }

    .van-popup {

      // top: 0;
      // transform:translate3d(0,0%,0) !important;
      .van-nav-bar {
        .van-nav-bar__left {
          .van-icon {
            font-size: 22px;
            color: #46d0ca !important;
          }
        }
      }
    }

    .sort {
      position: fixed;
      position: fixed;
      width: 100%;
      top: 50px;
      z-index: 999;
      .filter {
        width: 100%;
        height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .filter_neo {
          display: flex;
          flex-direction: column;
          width: 80%;
          height: 40%;

          .van-checkbox-group {
            display: flex;
          }
        }

        .filter_two {
          display: flex;
          flex-direction: column;
          width: 80%;

          // height: 50%;
          .van-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
              // width: 33%;
              margin-top: 0.3125rem;
            }
          }
        }
      }
    }

    .list {
      .van-list {
        .commodity {
          position: relative;
          display: flex;
          width: 100%;
          height: 11.375rem;
          /* background: #000000; */
          justify-content: center;
          align-items: center;
          border-bottom: 0.0625rem solid #f2f2f2;

          .commodity-img {
            display: flex;
            width: 40%;
            height: 80%;
            /* align-items: center; */
            /*垂直居中*/
            justify-content: center;

            /*水平居中*/
            img {
              display: flex;
              width: 90%;
              height: 90%;
              border-radius: 0.625rem;
            }
          }

          .commodity-details {
            width: 100%;

            /* display: flex; */
            /* justify-content: center; */
            /* align-items: center; */
            .details-teile {
              height: 1.875rem;
              line-height: 1.875rem;
              font-size: 16px;
            }

            .deleted-content {
              width: 95%;
              margin-top: 0.3125rem;
              font-size: 12px;
              color: #909090;
            }

            .deleted-km {
              display: flex;
              justify-content: space-between;
              margin-top: 0.625rem;
              font-size: 12px;
              color: #909090;
            }
          }
        }
      }
    }
  }
</style>
